<template>
  <div class="wrap">
    <img src="../../static/img/header-logo.jpg"
         width="100%"
         alt="学校logo">
    <flow>
      <flow-state state="1"
                  title="核对"
                  is-done>
      </flow-state>
      <flow-line is-done></flow-line>
      <flow-state state="2"
                  title="填写"
                  is-done></flow-state>
      <flow-line tip="进行中"></flow-line>
      <flow-state state="3"
                  title="复核"></flow-state>
      <flow-line></flow-line>
      <flow-state state="4"
                  title="提交"></flow-state>
      <flow-line></flow-line>
      <flow-state state="5"
                  title="服务台确认"></flow-state>
      <flow-line></flow-line>
      <flow-state state="6"
                  title="完成"></flow-state>
    </flow>
    <p style="text-align:center; font-size:22px; margin-top:12px;">完善您的个人信息</p>
    <group>
      <x-input title="您的联系方式"
               class="lab rqu"
               :show-clear="false"
               label-width="120px"
               v-model="phone_num"
               :max="11"
               is-type="china-mobile">
        <icon slot="right"
              :type="isShowIcon_phone_num"
              @click.native="showIcon('phone_num')"></icon>
      </x-input>
      <x-input title="家长联系方式1"
               class="lab rqu"
               :show-clear="false"
               v-model="family_num1"
               :max="11"
               label-width="120px"
               is-type="china-mobile">
        <icon slot="right"
              :type="isShowIcon_family_num1"
              @click.native="showIcon('family_num1')"></icon>
      </x-input>
      <x-input title="家长联系方式2"
               class="lab rqu"
               :show-clear="false"
               v-model="family_num2"
               :max="11"
               label-width="120px"
               is-type="china-mobile">
        <icon slot="right"
              :type="isShowIcon_family_num2"
              @click.native="showIcon('family_num2')"></icon>
      </x-input>
    </group>
    <group>
      <x-textarea title="您的家庭住址"
                  class="lab rqu textarea_padding"
                  v-model="address"
                  style="font-size: 17px; line-height: 17px;"
                  :rows="1"
                  autosize></x-textarea>
    </group>
    <group>
      <x-input title="您的微信号"
               v-model="wechat_id"
               :show-clear="false"
               label-width="120px"
               class="lab seat">
        <icon slot="right"
              :type="isShowIcon_wechat_id"
              @click.native="showIcon('wechat_id')"></icon>
      </x-input>
      <x-input title="您的QQ号"
               v-model="qq_id"
               :show-clear="false"
               label-width="120px"
               class="lab seat">
        <icon slot="right"
              :type="isShowIcon_qq_id"
              @click.native="showIcon('qq_id')"></icon>
      </x-input>
    </group>
    <group style="padding-left:8px; background:#fff;">
      <popup-picker title="政治面貌"
                    :data="polApp"
                    v-model="policylook"
                    class="lab rqu"></popup-picker>
    </group>
    <flexbox style="margin: 25px 0;">
      <flexbox-item>
        <x-button @click.native="goBack">上一步</x-button>
      </flexbox-item>
      <flexbox-item>
        <x-button @click.native="toNext">下一步</x-button>
      </flexbox-item>
    </flexbox>
    <p class="copyright">技术支持&copy;三月软件小组</p>
    <toast v-model="showmsg"
           type="warn">{{msg}}</toast>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowIcon_phone_num: "",
      isShowIcon_family_num1: "",
      isShowIcon_family_num2: "",
      isShowIcon_wechat_id: "",
      isShowIcon_qq_id: "",
      phone_num: "",
      family_num1: "",
      family_num2: "",
      address: "",
      wechat_id: "",
      qq_id: "",
      showmsg: false,
      msg: "",
      forms: false,
      polApp: [["共青团员", "群众", "中共预备党员", "中共党员"]],
      policylook: []
    };
  },
  watch: {
    phone_num(newValue) {
      this.isShowIcon_phone_num = newValue == "" ? "" : "clear";
    },
    family_num1(newValue) {
      this.isShowIcon_family_num1 = newValue == "" ? "" : "clear";
    },
    family_num2(newValue) {
      this.isShowIcon_family_num2 = newValue == "" ? "" : "clear";
    },
    wechat_id(newValue) {
      this.isShowIcon_wechat_id = newValue == "" ? "" : "clear";
    },
    qq_id(newValue) {
      this.isShowIcon_qq_id = newValue == "" ? "" : "clear";
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.forms = from.path == "/students/myInfo" ? true : false;
      if (vm.forms) {
        let student = JSON.parse(localStorage.getItem("student"));
        vm.phone_num = student.phone_num;
        vm.family_num1 = student.family_num;
        vm.family_num2 = student.family_numtwo;
        vm.address = student.address;
        vm.wechat_id = student.wechat_id;
        vm.qq_id = student.qq_id;
        vm.forms = false;
      }
    });
  },
  mounted() {
    let _this = this;
    let student = JSON.parse(localStorage.getItem("student"));
    _this.address = student != null ? student.address : "";
    let look = student != null ? student.polApp : "";
    if (look != "") {
      _this.policylook.push(look);
    }
  },
  methods: {
    goBack() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
        this.$router.push("/students/confirmInfo");
      }, 300);
    },
    toNext() {
      let _this = this;
      let params = new URLSearchParams();
      if (
        _this.phone_num != "" &&
        _this.family_num1 != "" &&
        _this.family_num2 != "" &&
        _this.address != "" &&
        _this.policylook.length != 0
      ) {
        if (
          /^1[3456789]\d{9}$/.test(_this.phone_num) &&
          /^1[3456789]\d{9}$/.test(_this.family_num1) &&
          /^1[3456789]\d{9}$/.test(_this.family_num2)
        ) {
          params.append("phone_num", _this.phone_num);
          params.append("family_num", _this.family_num1);
          params.append("family_numtwo", _this.family_num2);
          params.append("address", _this.address);
          params.append("wechat_id", _this.wechat_id);
          params.append("qq_id", this.qq_id);
          params.append("polApp", _this.policylook[0]);
          _this.axios.post("/student/checkcStu", params).then(resp => {
            if (resp.data.code == 0) {
              this.$vux.loading.show({
                text: "Loading"
              });
              setTimeout(() => {
                this.$vux.loading.hide();
              }, 300);
              _this.updataStorage();
              _this.$router.push("/students/myInfo");
            } else if (resp.data.code == 1) {
              _this.msg = resp.data.msg;
              _this.showmsg = true;
            }
          });
        } else {
          _this.msg = "联系方式填写有误,请重填!";
          _this.showmsg = true;
        }
      } else {
        _this.msg = "请先补全您的个人信息!";
        _this.showmsg = true;
      }
    },
    updataStorage() {
      let student = JSON.parse(window.localStorage.getItem("student"));
      student.phone_num = this.phone_num;
      student.family_num = this.family_num1;
      student.family_numtwo = this.family_num2;
      student.address = this.address;
      student.wechat_id = this.wechat_id;
      student.qq_id = this.qq_id;
      student.polApp = this.policylook[0];
      window.localStorage.setItem("student", JSON.stringify(student));
    },
    // 点击清空input框
    showIcon(value) {
      switch (value) {
        case "phone_num":
          this.phone_num = "";
          break;
        case "family_num1":
          this.family_num1 = "";
          break;
        case "family_num2":
          this.family_num2 = "";
          break;
        case "wechat_id":
          this.wechat_id = "";
          break;
        case "qq_id":
          this.qq_id = "";
          break;
      }
    }
  }
};
</script>

<style scoped>
/*当屏幕尺寸小于670px时，应用下面的CSS样式*/
@media screen and (max-height: 670px) {
  .wrap {
    background: linear-gradient(#fff, #afd0e4);
  }
}
.lab /deep/ .weui-label {
  font-size: 15px;
}
.wrap {
  position: relative;
  padding-bottom: 60px;
}
.weui-btn {
  background: rgb(0, 160, 233);
  color: #fff;
  width: 100px;
  border-radius: 2px;
  cursor: pointer;
}
.lab /deep/ .vux-label {
  font-size: 15px;
}
.copyright {
  font-size: 12px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rqu.lab /deep/ .weui-label:before {
  content: "\273d";
  color: red;
  vertical-align: 2px;
  font-size: 10px;
}
.seat.lab /deep/ .weui-label:before {
  content: "\273d";
  color: transparent;
  vertical-align: 2px;
  font-size: 10px;
}

.lab >>> .vux-popup-header-right {
  color: rgb(0, 160, 233);
}
.textarea_padding >>> .weui-textarea {
  padding-left: 15px;
}
.weui-wepay-flow,
.weui-wepay-flow-auto {
  padding: 22px 25px 23px;
}
</style>

